<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>美好的心愿</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userTravels.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/checkLogin.js"></script>
    <!--<script src="/js/queryAndBlank.js"></script>-->
    <script>

        $(function () {

            var currentPage = 1;
            //数据容器,将查询到的游记数组的数据全部存到该容器中,再拿该容器的内容去渲染界面
            var travels = [];
            //总页数
            var pages;
            //标记是否可以进行查询,相当于同步锁
            var loading = true;

            queryAndBlank(baseUrl + '/users/wishes', $('#wishes'));

            //查询填充数据的方法,queryUrl是查询的请求资源,obj是被进行数据渲染的jQuery对象
            function queryAndBlank(queryUrl, obj) {
                if (loading) {
                    //当有查询任务在进行时,关闭可查询开关
                    loading = false;
                    $.get(queryUrl, {currentPage: currentPage}, function (data) {
                        console.log(data);
                        if(data.size == 0){
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: true,
                                content: '还没有心愿,立刻添加吧!',
                                onClickConfirmBtn: function () {
                                    window.location.href = '/strategyPage.html';
                                },
                                onClickCancelBtn: function () {
                                    dialog("3秒后回到我的界面");
                                    setTimeout(function () {
                                        window.location.href="/mine/profiles.html"
                                    },2000);
                                }
                            })
                        }

                        //合并两个数组到第一个数组上
                        $.merge(travels, data.list);
                        //将travels数组再进行包装,主要将它封装到list变量中,便于渲染时读取变量
                        var json = {list: travels};
                        //使用jrender进行数据渲染
                        obj.renderValues(json, {
                            getHref: getHref
                        });
                        //当前页自增
                        currentPage++;
                        //总页数
                        pages = data.pages;
                        //当查询结束之后,打开查询开关
                        loading = true;


                        $(".deleteWishBtn").click(function () {
                            //获得隐藏域中的render-value的值
                            var strategyId = $('.deleteWish').html();
                            console.log(strategyId);
                            //发送请求
                            $.ajax({
                                url: baseUrl + "/users/deleteWish/" + strategyId,
                                method: "delete",
                                success: function (data) {
                                    if (data.success) {
                                        dialog("操作成功")
                                    } else {
                                        dialog("操作失败")
                                    }
                                }
                            })

                            setTimeout(function () {
                                window.location.reload();
                            },500)
                        })
                    });
                }
            }


            $(window).scroll(function () {
                if (($(window).height() + $(document).scrollTop()) >= $(document).height() - 10) {
                    if (currentPage <= pages) {
                        queryAndBlank(baseUrl + '/users/wishes', $('.wishes'));
                    } else {
                        if (($(window).height() + $(document).scrollTop()) >= $(document).height()) {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '客官,已经到底啦!',
                                autoClose: 1000,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }

                    }
                }
            });

            var getHref = function (item, value) {
                var url = $(item).data('url');
                $(item).attr('href', url + value);
            }


        });


    </script>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="profiles.html">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>美好的心愿</span>
        </div>
        <div class="col"></div>
    </div>
</div>


<div class="container wishes" id="wishes">
    <dl class="list" render-loop="list">
        <div>
            <div>
                <div class="list-group-item d-flex justify-content-between align-items-center">
                    <div class="item">
                        <a render-fun="getHref" render-key="list.strategy.id" data-url="/strategyCatalogs.html?id=">
                            <img render-src="list.strategy.coverUrl" width="50px"/>
                        </a>
                        <span render-html="list.strategy.title"></span> </br>
                        <span style="font-size: 5px;">心愿添加时间:</span>
                        <span style="font-size: 5px;" class="aui-flex-add" render-html="list.creatTime"></span>

                        <button class="deleteWishBtn btn-sm btn" >已完成心愿</button>
                        <span render-html="list.strategy.id" class="deleteWish" hidden></span>
                    </div>
                </div>
            </div>
        </div>
    </dl>
</div>
</body>

</html>
